var data1 = [{
    "title": "小小军团2"
}, {
    "title": "剑与英雄"
}, {
    "title": "梦工厂大冒险"
}, {
    "title": "新网球王子"
}, {
    "title": "轩辕剑剑之源"
}, {
    "title": "未来风暴"
}, {
    "title": "失落王冠"
}, {
    "title": "森林王国"
}, {
    "title": "末日沙城"
}, {
    "title": "仙剑奇侠传"
}, {
    "title": "口袋觉醒"
}, {
    "title": "疯狂大派对"
}, {
    "title": "暮色方舟"
}, {
    "title": "刀剑情缘"
}, {
    "title": "开拓"
}, {
    "title": "小花仙"
}, {
    "title": "魔王与神锤"
}, {
    "title": "时空之旅"
}, {
    "title": "天姬变"
}];
var top_recom = document.querySelector(".top-recom");
var Str1 = '';
for (let dom of data1) {
    Str1 += ` <a href="#" class="top-link">
    ${dom.title}
  </a>
    `
}
top_recom.innerHTML = Str1;
var data2 = [{
    "name": "三国幻想大陆",
    "des": "卡牌",
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/2/209480974_.png"
}, {
    "name": "荒野乱斗",
    "des": "射击",
    "img_url": "https://image.9game.cn/s/9game/g/2020/9/14/176061045_.gif"
}, {
    "name": "凹凸世界",
    "des": "角色",
    "img_url": "https://image.9game.cn/s/9game/g/2020/7/1/168313628_.png"
}, {
    "name": "一人之下",
    "des": "动作",
    "img_url": "https://image.9game.cn/s/9game/g/2020/4/8/145495154_.png"
}, {
    "name": "战歌竞技场",
    "des": "策略",
    "img_url": "https://image.9game.cn/s/9game/g/2020/4/7/145187487_.png"
}, {
    "name": "海岛纪元",
    "des": "角色",
    "img_url": "https://image.9game.cn/s/9game/g/2020/9/29/178913469_.png"
}]
var down_side = document.querySelector(".down-side");
var Str2 = '';
for (let dom of data2) {
    Str2 += `<li class="link">
    <img src="${dom.img_url}" alt="">
    <div class="right">
      <h3 class="name">${dom.name}</h3>
      <p class="des">${dom.des}</p>
    </div>
    </li>
    `
}
down_side.innerHTML = Str2;
var data3 = [{
    "text": "《上古王冠》春节活动爆料 五星英雄免费送！",
    "img_url": "http://image.9game.cn/s/9game/g/2021/2/4/210742966.jpg",
    "act": "active"
}, {
    "text": "《碧蓝航线》2月4日春节版本全新角色抢先看！",
    "img_url": "http://image.9game.cn/s/9game/g/2021/2/4/210741867.jpg"
}, {
    "text": "奇趣国风行《猫和老鼠》手游全新场景飘逸登场",
    "img_url": "http://image.9game.cn/s/9game/g/2021/2/4/210741130.jpg"
}, {
    "text": "《天谕》春节大版本来了！",
    "img_url": "http://image.9game.cn/s/9game/g/2021/2/4/210740491.jpg"
}, {
    "text": "《第五人格》有位庄园伙伴提前曝光了春节活动现场",
    "img_url": "http://image.9game.cn/s/9game/g/2021/2/4/210745154.jpg"
}];
var focus_img = document.querySelector(".focus-img");
var Str3 = '';
data3.forEach((item, i) => {
    Str3 += ` <li class="current ${item.act}" data-i="${i}" >
    <img src="${item.img_url}" alt="">
    <p class="text">${item.text}</p>
</li>
    `
});
focus_img.innerHTML = Str3;
var focus_ctrl = document.querySelector(".focus-ctrl");

var Str4 = '';
data3.forEach((item, i) => {
    Str4 += ` <li class="${item.act} "data-i="${i}">
    <img src="${item.img_url}" alt="">
    <span class="meng"></span>
</li>
    `
});
focus_ctrl.innerHTML = Str4;
var lis = document.querySelectorAll(".focus-img li");
var lis1 = document.querySelectorAll(".focus-ctrl li");
var focus_img_con = document.querySelector(".focus-img-con");
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var index1 = 0;

function move() {
    for (let i = 0; i < lis.length; i++) {
        lis[i].classList.remove("active");
        lis1[i].classList.remove("active");
    }
    lis[index1].classList.add("active");
    lis1[index1].classList.add("active");
}
var Timer = setInterval(function () {
    next.onclick();
}, 1000);
next.onclick = function () {
    index1++;
    if (index1 == 5) {
        index1 = 0;
    }
    move();
}
prev.onclick = function () {
    index1--;
    if (index1 == -1) {
        index1 = 4;
    }
    move();
}
focus_img_con.onmouseenter = function () {
    clearInterval(Timer);
}
focus_img_con.onmouseleave = function () {
    Timer = setInterval(function () {
        next.onclick();
    }, 1000);
}
focus_ctrl.onmouseover = function (e) {
    if (e.target.localName == "li") {
        index1 = e.target.dataset.i;
        move();
    }
}
// 轮播小块 
focus_ctrl.onmouseout = function (e) {
    if (e.target.localName == "li") {
        index1 = e.target.dataset.i;
        move();
    }
}

var data4 = [{
    "type": "新闻",
    "link": "《家园卫士》春节庆典迎新春 红红火火过大年"
}, {
    "type": "综合",
    "link": "策划面对面| 《狼人之间》新地图来了"
}, {
    "type": "新闻",
    "link": "《天谕》手游在线拜师收徒 修行礼送不停"
}, {
    "type": "新闻",
    "link": "《妖灵战姬》新春版本更新上线来袭！！！"
}, {
    "type": "新闻",
    "link": "金牛贺岁新春献礼《卧龙吟》牛年春节活动前瞻"
}, {
    "type": "新闻",
    "link": "《第五人格》守护期待的光明与未来—诺曼"
}];
var hotnews_list = document.querySelector(".hotnews-list");
var Str5 = '';
for (let dom of data4) {
    Str5 += ` <li>
    <a href="#" class="typ">${dom.type}</a>
    <a href="#" class="lin">${dom.link}</a>
    <span class="date">02-05</span>
</li>
    `
}
hotnews_list.innerHTML = Str5;

var data5 = [{
    "img_url": "http://image.9game.cn/s/9game/g/2021/1/5/198709995_.png",
    "tit": "镇魂街武神躯萌新卡牌搭配",
    "text": "相信很多玩家初期都不知道，镇魂街武神躯阵容应该怎么搭配，毕竟没看过原著的小伙伴们是很难理解。本期就给大家带来新手阵容推荐，还不知道...",
    "time": "02-02 10:34"
}, {
    "img_url": "http://image.9game.cn/s/9game/g/2021/1/19/202815337_.png",
    "tit": "梦想新大陆龙蛋找不到 龙蛋位置坐标分享",
    "text": "梦想新大陆是一款回合制的RPG游戏，在游戏中散落30颗龙蛋，集齐散落的龙蛋就可以获得完整的蛋宝宝，那梦想新大陆龙蛋找不到怎么办呢？...",
    "time": "02-02 10:32"
}, {
    "img_url": "http://image.9game.cn/s/9game/g/2019/10/15/104171927_.jpg",
    "tit": "英雄联盟手游2.1更新预告 霞洛登场新年皮肤上架​",
    "text": "英雄联盟手游官方已经发布了下一个游戏版本的公告，新英雄、新皮肤、新活动，以及贴心的后续版本更新计划。下面我们就进入英雄联盟手游2....",
    "time": "02-02 10:32"
}, {
    "img_url": "http://image.9game.cn/s/9game/g/2020/4/22/149476841_.png",
    "tit": "小森生活稀有动物在哪抓 稀有动物刷新点介绍​",
    "text": "小森生活是一款有趣的“种田”手游，玩家可以在这里钓鱼、打猎、种菜，渡过各种美好的时光。游戏中有许多小动物以及稀有度动物，可以得到副...",
    "time": "02-02 10:32"
}, {
    "img_url": "http://image.9game.cn/s/9game/g/2021/2/1/209092381.png",
    "tit": "明日方舟铅封行动新约挑战怎么打",
    "text": "明日方舟新赛季铅封行动已经进入到了后半阶段，开放了许多需要完成的新合约挑战任务。那么明日方舟铅封行动新约挑战怎么打呢？今天小编就为...",
    "time": "02-02 10:31"
}, {
    "img_url": "http://image.9game.cn/s/9game/g/2020/12/14/190493740_.png",
    "tit": "使命召唤手游国服公测时间确定 定档12月25日圣诞节",
    "text": "千呼万唤始出来，使命召唤手游国服公测时间终于确定下来了！这款风靡全球的3A级枪战手游《使命召唤手游》（以下简称CODM）将于12月...",
    "time": "12-17 11:00"
}]
var box_text1 = document.querySelector(".box-text1");
var Str6 = '';
for (let dom of data5) {
    Str6 += ` <li>
    <img src="${dom.img_url}" alt="">
    <div class="des">
        <h3 class="tit">${dom.tit}
            <span class="pic"></span>
        </h3>
        <p class="text">${dom.text}</p>
        <span class="time">${dom.time}</span>
    </div>
</li>
    `
}
box_text1.innerHTML = Str6;

var data6 = [{
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/2/209568538_.gif",
    "tit": "上古纷争",
    "text": "[上古纷争]内测豪礼"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/1/5/198709995_.png",
    "tit": "镇魂街武神躯",
    "text": "[镇魂街：武神躯]初级礼包"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2020/11/13/185915183_.png",
    "tit": "新征战",
    "text": "[新征战]年货福利"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2020/10/27/183309727_.png",
    "tit": "仙坠凡尘",
    "text": "[仙坠凡尘]新手礼包"
}];
var box_text2 = document.querySelector(".box-text2");
var Str7 = '';
for (let dom of data6) {
    Str7 += `<li>
   <img src="${dom.img_url}" alt="">
   <div class="right-text">
       <p class="tit">${dom.tit}</p>
       <p class="text">${dom.text}</p>
       <a href="#">领激活码</a>
   </div>
</li>
   `
}
box_text2.innerHTML = Str7;

var data7 = [{
    "n": "1",
    "name": "地下城与勇士",
    "type": "动作",
    "p": "即将测试",
    "color": "n"
}, {
    "n": "2",
    "name": "斗罗大陆2",
    "type": "角色",
    "p": "即将测试",
    "color": "n2"
}, {
    "n": "3",
    "name": "黎明觉醒",
    "type": "冒险",
    "p": "即将测试",
    "color": "n3"
}, {
    "n": "4",
    "name": "斗罗大陆",
    "type": "角色",
    "p": "删档内测"
}, {
    "n": "5",
    "name": "忘川风华录",
    "type": "角色",
    "p": "删档内测"
}, {
    "n": "6",
    "name": "君临天下",
    "type": "角色",
    "p": "删档内测"
}, {
    "n": "7",
    "name": "航海王",
    "type": "动作",
    "p": "删档内测"
}, {
    "n": "8",
    "name": "空匣人型",
    "type": "角色",
    "p": "删档内测"
}, {
    "n": "9",
    "name": "天地劫",
    "type": "角色",
    "p": "删档内测"
}, {
    "n": "10",
    "name": "艾兰岛",
    "type": "冒险",
    "p": "删档封测"
}];
var tab1 = document.querySelector(".tab1");
var Str8 = '';
for (let dom of data7) {
    Str8 += ` <tr class="tr1">
    <td class="num num1"><span class="${dom.color}">${dom.n}</span></td>
    <td class="name1">${dom.name}</td>
    <td class="type">${dom.type}</td>
    <td class="static">${dom.p}</td>
</tr>
    `
}
var Str80 = `  <tr>
 <th class="time">排名</th>
 <th class="name">网游</th>
 <th class="type">分类</th>
 <th class="static">状态</th>
</tr>` + Str8;
tab1.innerHTML = Str80;

var data8 = [{
    "n": "1",
    "name": "神陵武装",
    "type": "动作",
    "color": "n"
}, {
    "n": "2",
    "name": "上古王冠",
    "type": "角色",
    "color": "n2"
}, {
    "n": "3",
    "name": "奥特曼宇宙",
    "type": "动作",
    "color": "n3"
}, {
    "n": "4",
    "name": "游戏王",
    "type": "角色"
}, {
    "n": "5",
    "name": "重生细胞",
    "type": "动作"
}, {
    "n": "6",
    "name": "影之刃3",
    "type": "角色"
}, {
    "n": "7",
    "name": "太空狼人杀",
    "type": "休闲"
}, {
    "n": "8",
    "name": "神将三国",
    "type": "策略"
}, {
    "n": "9",
    "name": "王牌高校",
    "type": "角色"
}, {
    "n": "10",
    "name": "机动都市阿尔法",
    "type": "射击"
}];
var tab2 = document.querySelector(".tab2");
var Str9 = '';
for (let dom of data8) {
    Str9 += `<tr class="tr1">
    <td class="num"><span class="${dom.color}">${dom.n}</span></td>
    <td class="name1">${dom.name}</td>
    <td class="type">${dom.type}</td>
    <td class="static"><a href="#" class="xiazai"></a></td>
</tr>
    `
}
var Str90 = `<tr>
<th class="time1">排序</th>
<th class="name">游戏</th>
<th class="type">分类</th>
<th class="static1">下载</th>
</tr>` + Str9;
tab2.innerHTML = Str90;

var data9 = [{
    "img_url": "http://image.9game.cn/s/9game/g/2020/9/23/177808281_.png",
    "tit": "一念逍遥器室怎么玩 器室炼器功能玩法介绍",
    "text": "《一念逍遥》可不是简单的修仙，有许多衍生玩法，比如说器室。有的小伙伴可能还不清楚一念逍遥器室怎么玩，这里给大家做个简单介绍。 ..."
}, {
    "img_url": "http://image.9game.cn/s/9game/g/2021/2/1/209194613.jpg",
    "tit": "炉石传说新版本三国皮肤有哪些 三国皮肤推荐",
    "text": "近期暴雪炉石传说推出了一套以三国为背景的中国风皮肤，精美的立绘将许多小伙伴的眼球吸引走了。就让小编带小伙伴看一看炉石传说新版本三国..."
}, {
    "img_url": "http://image.9game.cn/s/9game/g/2020/4/22/149476841_.png",
    "tit": "小森生活猫碗怎么制作 猫碗免费获得方法",
    "text": "我们在游戏中，不管是领养猫咪，亦或是投喂猫咪，都是需要用到猫碗，而小森生活猫碗怎么制作，怎么免费获得猫碗，就成为不少爱猫一族最为关..."
}, {
    "img_url": "http://image.9game.cn/s/9game/g/2021/1/28/207161840_.gif",
    "tit": "影之刃3魂技能链推荐 魂技能链怎么搭配",
    "text": ""
}];
var box_text3 = document.querySelector(".box-text3");
var Str10 = '';
for (let dom of data9) {
    Str10 += `<li>
    <img src="${dom.img_url}" alt="">
    <div class="right-text">
        <p class="tit">${dom.tit}</p>
        <p class="text">${dom.text}</p>
    </div>
</li>
    `
}
box_text3.innerHTML = Str10;

var data10 = [{
    "img_url": "https://image.9game.cn/s/9game/g/2018/1/8/19092362.jpg",
    "word": "江湖惊现整容术！《楚留香》捏脸视频曝光"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2016/11/18/14966444.jpg",
    "word": "《影之刃2》PV精彩视频曝光"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2016/9/18/14270655.jpg",
    "word": "《仙剑奇侠传3D回合》精彩视频合集"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2016/9/13/14253263.jpg",
    "word": "《装甲联盟》曝老司机调戏萌妹视频"
}]
var right_video = document.querySelector(".right-video");
var Str11 = '';
for (let dom of data10) {
    Str11 += `<a href="#">
    <img src="${dom.img_url}" alt="">
    <p class="text">
     <span class="play"></span>
     <span class="word">${dom.word}</span>
    </p>
    <div class="meng"></div>
    <span class="pla"></span>
</a>
    `
}
right_video.innerHTML = Str11;

var data11 = [{
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/9/214338741_.jpg",
    "name": "一起来吃瓜",
    "ss": "立即下载"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/9/214338705_.jpg",
    "name": "涂鸦射手",
    "ss": "立即下载"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/9/214338363_.jpg",
    "name": "合成大菠萝",
    "ss": "立即下载"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/9/214004547_.jpg",
    "name": "修武",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/9/214004515_.jpg",
    "name": "暴富打工人",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/9/214004498_.jpg",
    "name": "人偶2纯白变",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/8/213781458_.jpg",
    "name": "Mrs",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/8/213781298_.jpg",
    "name": "Infini",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/8/213781257_.jpg",
    "name": "BikeMe",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/8/213781202_.jpg",
    "name": "OmNomK",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/8/213781159_.jpg",
    "name": "TwinRu",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/8/213781136_.jpg",
    "name": "IcingC",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/8/213781076_.jpg",
    "name": "星系驱逐舰深",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/8/213780995_.jpg",
    "name": "Submar",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/8/213780964_.jpg",
    "name": "Bottle",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/8/213780937_.jpg",
    "name": "Impost",
    "ss": "进入专区"
}]
var xyq = document.querySelector(".xyq");
var Str12 = '';
for (let dom of data11) {
    Str12 += `<li>
    <img src="${dom.img_url}" alt="">
    <p>${dom.name}</p>
    <a href="#">${dom.ss}</a>
</li>
    `
}
xyq.innerHTML = Str12;
var data12 = [{
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/8/213658839_.png",
    "name": "3D外星人猎",
    "ss": "立即下载"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/7/212898415_.png",
    "name": "第八秩序",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/5/211647767_.png",
    "name": "猫咪抡大锤",
    "ss": "立即下载"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/5/211503877_.png",
    "name": "这锅我不背",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/4/210861911_.png",
    "name": "真实飞行员模",
    "ss": "立即下载"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/4/210861132_.png",
    "name": "魔灵战魂",
    "ss": "立即下载"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/4/210726028_.png",
    "name": "可爱跑酷",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/2/209513163_.png",
    "name": "世界末日幸存",
    "ss": "立即下载"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/1/209158064_.png",
    "name": "警笛头",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/1/209157406_.png",
    "name": "人类迷宫一败",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/1/209108781_.jpg",
    "name": "死亡射手4",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/1/209104962_.jpg",
    "name": "snakev",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/1/209102814_.jpg",
    "name": "VA11HA",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/1/209102323_.jpg",
    "name": "破天一棒",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/1/209100643_.jpg",
    "name": "Unfore",
    "ss": "进入专区"
}, {
    "img_url": "https://image.9game.cn/s/9game/g/2021/2/1/209100512_.jpg",
    "name": "海鳐飞行",
    "ss": "进入专区"
}]
var djq = document.querySelector(".djq");
var Str13 = '';
for (let dom of data12) {
    Str13 += `<li>
    <img src="${dom.img_url}" alt="">
    <p>${dom.name}</p>
    <a href="#">${dom.ss}</a>
</li>
    `
}
djq.innerHTML=Str13;